<template>
  <div class="contact-us">
    <heads title="联系我们"></heads>
    <div class="main-content">
      <van-form @submit="feedBack">
        <van-field
    v-model="username"
    name="姓名"
    label="姓名"
    placeholder="姓名"
    :rules="[{ required: true, message: '请填写姓名' }]"
  />
  <van-field
    v-model="phone"
    type="number"
    name="手机号"
    label="手机号"
    placeholder="手机号"
    maxlength='11'
    :rules="[{ required: true, message: '请填写手机号' }]"
  />
        <van-field
          v-model="feedback"
          type="textarea"
          placeholder="您有什么问题或意见，请告诉我们吧~"
          :rules="[{ required: true, message: '请填写您的问题或意见' }]"
        />
         <van-cell-group>           
            <van-cell value>
              <template #default>
                <h1 class="cell-title">联系电话（工作日：09:00-18:00）</h1>
                <div class="item flex space-between">
                  <p>
                   021-9999 837
                  </p>
                  <a :href="`tel:021-9999 837`" class="color-primary">点击拨打电话</a>
                </div>
              </template>
            </van-cell>
          </van-cell-group>

        <div class="btn-box">
          <van-button type="info" class="btn-common" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Mock from "mockjs";
export default {
  components: {
    heads: resolve => require(["@/components/common/heads"], resolve)
  },
  data() {
    return {
      username:'',
      phone:'',
      feedback: ""
    };
  },

  methods: {
    feedBack(values) {
      let _this = this;
      let params = {
         name:this.username,
      phone:this.phone,
        content: _this.feedback
      };
      _this.$ajax
        .post(`${_this.$baseUrl}/user/option`, params)
        .then(function(res) {
          if (res.data.code == 200) {
            _this.$toast.success("我们已收到您的反馈!");
            setTimeout(() => {
              _this.$router.push({ path: "/UserCenter", query: {} });
            }, 2000);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  created() {
    let _this = this;
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.contact-us {
  .main-content {
     min-height: 92vh;
    margin-top: 0;
    padding: 0.3rem;
    box-sizing: border-box;
  }
 
  /deep/ .van-cell {
    padding: 0.3rem;
    // border-radius: .1rem;
    .van-cell__title{
      justify-content: flex-start;
    }
    .van-field__label{
      text-align: left;
    }
  }
  .van-cell-group{
    margin-top: .3rem;
    border-radius: .1rem;
    .cell-title{
      font-size: .28rem;
      color: #999;
      
    }
    .item{
      padding-top: .3rem;
      p{
        font-size: .34rem;
        color: #1C1C1C;
      }
      a{
        font-size: .28rem;
      }
    }
  }
  textarea {
    min-height: 5rem;
    
  }
  .btn-box {
    box-sizing: border-box;
    padding-top: 1rem;
    button{
      width: 100%;
      line-height: .88rem;
      background: #34AD2A;
      border-radius: .44rem;
      border-color: #34AD2A;
      box-sizing: border-box;
    }
  }
}
</style>
